<template>
    <el-dialog v-model="open" title="添加角色" width="500px">
        <el-form :model="formItem" label-width="auto">

            <el-form-item label="角色名称">
                <el-input v-model="formItem.name" />
            </el-form-item>
<!-- {{ formItem }} -->
            <el-form-item label="角色状态">
                <el-radio-group v-model="formItem.state">
                    <el-radio label="开启" :value="1"></el-radio>
                    <el-radio label="关闭" :value="0"></el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="权限">

                <BaseTree ref="treeRef" check-strictly   node-key="_id"
                 :data="permissionData" 
                 show-checkbox :props="{
                label:'title'
                }">
            </BaseTree>

<!-- <BaseTree
 ref="treeRef" check-strictly   node-key="_id"
 :data="permissionData" 
                 show-checkbox :props="{
                label:'title'  }"

/> -->

            </el-form-item>
        </el-form>

<template #footer>
  <el-button>取消</el-button>
  <el-button type="primary" @click="handleOk">确认</el-button>
</template>

    </el-dialog>
</template>

<script setup lang="ts">

import api from '@/api';
import { RoleItem } from '@/api/modules/roles';
import { useFetchData } from '@/hooks/fetchData';
import { ElMessage, ElTree} from 'element-plus';
// import MenuItem from 'element-plus/es/components/menu/src/utils/menu-item.mjs';
import { onMounted, ref, watchEffect,watch } from 'vue'
import BaseTree from '../Base/BaseTree.vue';
const open = ref(false)
const formItem=ref<Partial<RoleItem>>({})
const {getPermissionDataAsync,permissionData}=useFetchData()
const treeRef=ref<InstanceType<typeof ElTree>>()
const emit=defineEmits(['getRolesData'])
onMounted(()=>{
    getPermissionDataAsync();
})

watch(open,()=>{
    if(!open.value){
formItem.value={};
treeRef.value!.setCheckedKeys([]);
    }
})





watchEffect(()=>{
    if(treeRef.value&&formItem.value._id){
        treeRef.value.setCheckedKeys(formItem.value.permissions!.map((item:any)=>item._id));    
    }
})

//打开弹窗
const onOpenDialog=(row?:RoleItem)=>{
    open.value=true;
    if(row){
        formItem.value={...row}
        //tree组件的默认选中
        // console.log(row);
        
        // treeRef.value!.setCheckedKeys
        // (row.permissions.map((item:any)=>item._id));
    }
}


const handleOk=()=>{
    if(formItem.value._id){
        handleUpdate();
    }else{
        handleAdd();
    }
   
}
const handleAdd=()=>{
    
    api.roles.add({
        ...formItem.value,
        permissions:treeRef.value!.getCheckedKeys()as string[]
    }).then(res=>{
        console.log(res);
        if(res.code==200){
            ElMessage.success('角色新增成功');
            open.value=false;
            emit('getRolesData');
        }else{
            ElMessage.error(res.message);
        }
    })
    
}

  const handleUpdate=()=>{
    api.roles.update({
        ...formItem.value,
        permissions:treeRef.value!.getCheckedKeys()as string[]
    }).then(res=>{
        console.log(res);
        if(res.code==200){
            ElMessage.success('角色修改成功');
            open.value=false;
            emit('getRolesData');
        }else{
            ElMessage.error(res.message);
        }
        
    })
  }









defineExpose({
    onOpenDialog
})



</script>

<style scoped></style>
